<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		    html,body{
		        width: 100%;
		        height: 100%;
		        background:#0A0F23;
		    }
		    *{
		        margin: 0;
		        padding: 0;
		    }
		</style>
	</head>
	<body>
		<div id="worldMap" style="width:100%; height: 100%;"></div>
		<script src="../../components/echarts-4.0.4.min.js"></script>
	    <script src="jquery-1.9.1.min.js"></script>
	    <script src="world.js"></script>
	    <script src="bmap.min.js"></script>
	    <script src="china.js"></script>
	    <script type="text/javascript">
	    	var worldChart = echarts.init(document.getElementById('worldMap'));
	    //	worldChart.showLoading();
	    	var v = [20, 6, 4, 5, 5, 4];
			var geoCoordMap = {
			    '西安': [108.95, 34.27],
			    '纽约': [ -74.00597,40.71435],
			    '东京': [139.6932, 35.6898],
			    '首尔': [126.58, 37.33],
			    '哈瓦那': [-82.23, 23.08],	//古巴
			    '伦敦': [-0.0741, 51.3028],
			
			};
			
			var data = [ {
			    name: '西安',
			    value: 30
			},{
			    name: '纽约',
			    value: 8
			},{
			    name: '东京',
			    value: 20
			},{
			    name: '首尔',
			    value: 50
			},{
			    name: '哈瓦那',
			    value: 18
			}, {
			    name: '伦敦',
			    value: 45
			}];
			
			function formtGCData(geoData, data, srcNam, dest) {
			    var tGeoDt = [];
			    if (dest) {
			        for (var i = 0, len = data.length; i < len; i++) {
			            if (srcNam != data[i].name) {
			                tGeoDt.push({
			                    coords: [geoData[srcNam], geoData[data[i].name]]
			                });
			            }
			        }
			    } else {
			        for (var i = 0, len = data.length; i < len; i++) {
			            if (srcNam != data[i].name) {
			                tGeoDt.push({
			                    coords: [geoData[data[i].name], geoData[srcNam]]
			                });
			            }
			        }
			    }
			    return tGeoDt;
			}
			
			function formtVData(geoData, data, srcNam) {
			    var tGeoDt = [];
			    for (var i = 0, len = data.length; i < len; i++) {
			        var tNam = data[i].name
			        if (srcNam != tNam) {
			            tGeoDt.push({
			                name: tNam,
			                value: geoData[tNam],
			                symbolSize: v[i],
			                itemStyle: {
			
			                    normal: {
			                        color: '#17D4EE',	//红色  ffc100黄色
			                        borderColor: 'gold'
			                    }
			                }
			            });
			        }
			
			    }
			    tGeoDt.push({
			        name: srcNam,
			        value: geoData[srcNam],
			        symbolSize: 8,
			        itemStyle: {
			            normal: {
			                color: '#ef7418',	//蓝色
			                borderColor: '#fff'
			            }
			        }
			    });
			    return tGeoDt;
			}
			
			var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
			//var planePath = 'arrow';
			
			option = {
				title:{
					text: '一带一路军民两用技术转移转化',
					top:'10%',
					left:'center',
                    textStyle: {
                        fontSize: 22,
                        color: '#fff'
                        
                    }
				},
				
			    /*backgroundColor: '#000033',*/
			    geo: {
			        name: 'Enroll distribution',
			        type: 'map',
			        map: 'world',
			        top: '20%',
			        zoom: 1,
			        roam: false,
			        label: {
			            emphasis: {
			                show: false,
			                textStyle:{
			                	fontSize:16
			                }
			            }
			        },
			        itemStyle: {
			            normal: {
			                shadowBlur: 30,
			                shadowColor: 'rgba(0, 0, 0,0.8)',
			                areaColor: '#264C82',	//区域蓝色
			                borderColor: '#0DABEA'	//区域边线
			            },
			            emphasis: {
			                areaColor: '#264C82'	//蓝黑色
			            }
			        }
			    },
			    series: [{
			        type: 'lines',
			        zlevel: 2,
			        effect: {
			            show: true,
			            period: 6,
			            trailLength: 0.1,
			            color: '#fff',	//飞机颜色 60ff44荧光绿
			            symbol: planePath,
			            symbolSize: 12
			        },
			        lineStyle: {
			            normal: {
			                color: '#65A2C2',	//迁入线条颜色
			                width: 0,
			                opacity: 0.4,
			                curveness: 0
			            }
			        },
			        data: formtGCData(geoCoordMap, data, '西安', false)
			    }, {
			        type: 'effectScatter',
			        coordinateSystem: 'geo',
			        zlevel: 2,
			        rippleEffect: {
			            period: 4,
			            scale: 4,
			            brushType: 'stroke',
			        },
			        label: {
			            normal: {
			                show: true,
			                position: 'right',
			                formatter: '{b}',
			                fontSize:16,
			                color:'#8CE8E7'
			            }
			        },
			        symbolSize: 5,
			        itemStyle: {
			            normal: {
			                color: '#fff',
			                borderColor: 'gold'
			            }
			        },
			        data: formtVData(geoCoordMap, data, '西安')
			    }]
			};
			worldChart.setOption(option);
			
	    </script>
	</body>
</html>
